<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/sliding.js"></script>

</head>

<body>
    <div class="prefect-header-box">
        <div class="content">
            <div class="inter-header">
                <a href="./index.html">
                    <img src="./image/login/1.png" alt="">
                </a>

                <dd class="fr">
                    <ul>
                        <li>
                            销售热线：
                            <span>400-810-9528</span>
                        </li>
                        <li>
                            客服热线：
                            <span>400-886-9528</span>
                        </li>
                        <li>
                            <a href="">服务中心</a>

                        </li>
                    </ul>
                </dd>

            </div>
        </div>

    </div>
    <div class="login-banner">
        <div class="login-main clearfix">
            <div class="company-mian">
                <img src="./image/login/banner.png" alt="">
                <a href="./register.html">
                    <div class="comp-handle-btn">立即注册

                    </div>
                </a>

            </div>
            <!-- 登录方式tab切换 -->
            <div class="login-info-mian" fr>
                <div class="login-tit login-tab">
                    <a href="#" class="tab-item-link">手机快捷登录</a>
                    <a href="#" class="tab-item-link">账号密码登录</a>
                    <div class="tit-inter-bar">
                    </div>
                </div>

                <div class="phone-number">
                    <!-- 手机快捷登录 -->
                    <div class="number phone">
                        <ul class="login-list phone-login" id="phoneLoginForm">
                            <li>
                                <input id="phoneIpt" type="text" placeholder="请输入手机号码" autocomplete="off"
                                    class="login-text error" require="true" valid="mobilePhone" errortarget="phoneError"
                                    error="手机号码格式不正确" emptyerror="请输入手机号码" invalid="true" name="tel"
                                    onblur="return check_tel()">
                            </li>
                            <li class="form-error">
                                <span id="tel"></span>
                            </li>
                            <div class="container">
                                <div id="captcha" style="position: relative"></div>
                                <div id="msg"></div>
                            </div>
                            <script src="./js/sliding.js"></script>
                            <script>
                                jigsaw.init(document.getElementById('captcha'), function () {
                                    document.getElementById('msg').innerHTML = ''
                                })
                            </script>
                            <li class="form-error imgCode-error"></li>

                            <li>
                                <input id="smsCode" type="text" placeholder="请输入短信验证码" autocomplete="off"
                                    class="login-text sms-code sms-input" require="true" valid="smsCode"
                                    errortarget="smsCodeError" error="短信验证码不正确" emptyerror="请输入短信验证码"
                                    onblur="return check_yanzheng()" name="yz">
                                <a class="verification sure-num" id="smsCodeBtn">获取验证码</a>
                            </li>
                            <li class="form-error">
                                <span id="yz"></span>
                            </li>
                        </ul>

                    </div>
                    <!-- 账号密码登录 -->
                    <div class="number">
                        <ul class="login-list">
                            <form id="loginform">
                                <li>

                                    <input id="phone" type="text" placeholder="用户名/绑定手机号" autocomplete="off"
                                        class="login-text" require="true" valid="true" errortarget="accounterrortip"
                                        emptyerror="请输入登录账号" name="user_name" onblur="return check_username()">


                                </li>
                                <li class="form-error">
                                    <span id="username"></span>
                                </li>
                                <li>
                                    <input id="password" type="password" placeholder="请输入密码" autocomplete="off"
                                        class="login-text" require="true" valid="passwordLogin"
                                        errortarget="psderrortip" error="密码格式不正确（要求8-32位数字与字母结合）" emptyerror="请输入密码"
                                        name="user_pwd" onblur="return check_pwd()" form="loginform">
                                </li>
                            </form>
                            <li class="form-error">
                                <span id="pwd"></span>
                            </li>
                            <li id="accountCaptcha" class="account-cap-cla hide"> </li>
                            <li class="form-error account-cap-cls hide">
                                <span id="codeerrortip" class="hide">请进行滑块验证</span>
                            </li>
                        </ul>
                    </div>


                </div>

                <!-- 登录注册 -->
                <label class="login-check">
                    <div class="box">
                        <input type="checkbox" id="autoLogin">两周内自动登录
                        <a class="forget-pwd" href="./fpwd.html">忘记密码</a>
                    </div>
                </label>
                <button id="submitBtn" class="login-btn " type="button" form="loginform">立即登录</button>
                <div class="entrance " id="entranceId">
                    <a href="./register.html">没有账号？立即注册</a>
                </div>
            </div>

        </div>

    </div>

    <!-- 底部 -->
    <div class="foot">
        <p class="footOne">© Copyright Reserved 2014-2019　| &nbsp;&nbsp;<a href=""><img src="./image/login/guohui.png">
                京公网安备
                11010102002019号</a> |　京ICP备14057387号-1　|　北京易点淘网络技术有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=""><i
                    class="unit"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=""><i class="enterprise"></i></a>
        </p>
        <p class="footTwo">办公地址： 北京市海淀区西二旗大街39号融通高科大厦二层 易点租</p>
        <p class="footThree">
            <a href="">北京退换机地址</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="">上海退换机地址</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="">深圳退换机地址</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="">武汉退换机地址</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        </p>
    </div>
    <div class="yzerro">
        <div class="ms-box">
            <h4>
                提示信息
                <i class="iconfont icon-modal-close close"></i>
            </h4>
            <div class="bounced-content">
                <div class="bounced-choose">
                    <div class="bounced-text">用户名或密码错误</div>
                </div>
                <div class="bounced-btn">
                    <a href="#" class="ok-btn">确认</a>
                </div>
            </div>
        </div>
    </div>
    <script>
            //  手机号码验证 
            $(function () {
                $(".number").eq(0).addClass("cur")
                $(".tab-item-link").eq(0).addClass("tab-click")
                $(".tab-item-link").click(function () {
                    var i = $(this).index()
                    $(".number").eq(i).addClass("cur").siblings().removeClass("cur");
                    $(".tab-item-link").eq(i).addClass("tab-click").siblings().removeClass("tab-click")

                })
            })
        $(".login-btn")
        // var user_name = $("#phone").val()
        // console.log(user_name)
        function check_tel() {
            var tel = document.getElementsByName('tel')[0].value
            var ptn_tel = /^1[0-9]\d{9}$/;
            if (tel) {
                if (!tel.match(ptn_tel)) {
                    document.getElementById('tel').innerHTML = '手机号码格式不正确'
                    return false;
                } else {
                    document.getElementById('tel').innerHTML = ''
                    return true;
                }
            } else {
                document.getElementById('tel').innerHTML = '请输入手机号码'
            }
        }



        function check_yanzheng() {
            var yz = document.getElementsByName('yz')[0].value
            var ptn_yz = /[0-9]\d{5}$/;
            if (yz) {
                if (!yz.match(ptn_yz)) {
                    document.getElementById('yz').innerHTML = '短信验证码不正确'
                    return false;
                } else {
                    document.getElementById('yz').innerHTML = ''
                    return true;
                }
            } else {
                document.getElementById('yz').innerHTML = '请输入短信验证码'
            }
        }




        function check_username() {
            var user_name = $("#phone").val()
            console.log(user_name)
            var ptn_username = /^./;
            if (!user_name.match(ptn_username)) {
                document.getElementById('username').innerHTML = '请输入登录账号'
                return false;
            } else {
                document.getElementById('username').innerHTML = '   '
                return true;
            }
        }

        function check_pwd() {
            var user_pwd = $("#password").val()
            var ptn_pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,32}$/;
            if (pwd) {
                if (!user_pwd.match(ptn_pwd)) {
                    document.getElementById('pwd').innerHTML = '密码格式不正确（要求8-32位数字与字母结合）'
                    return false;
                } else {
                    document.getElementById('pwd').innerHTML = ''
                    return true;
                }
            } else {
                document.getElementById('pwd').innerHTML = '请输入密码'
                return false
            }
        }

        $(".login-btn").click(function () {
            var user_name = $("#phone").val()
            var user_pwd = $("#password").val()
            if (user_name == null || user_name == "") {
                document.getElementById('username').innerHTML = '请输入登录账号'
            }
            if (user_pwd == null || user_pwd == "") {
                document.getElementById('pwd').innerHTML = '请输入密码'
            }
            if (user_name && user_pwd) {
                if (check_username() && check_pwd()) {
                    $.ajax({
                        type: "get",   //提交的方法
                        url: "http://localhost/yidianzu/API/login.php", //提交的地址  
                        data: { user_name: user_name, user_pwd: user_pwd },
                        // async: false,    
                        success: function (data) {  //成功
                            console.log(data)
                            if (data == 'false') {
                                $(".yzerro").fadeIn()
                                $(".close").click(function () {
                                    $(".yzerro").addClass("hide")
                                })
                                $(".ok-btn").click(function () {
                                    $(".yzerro").addClass("hide")
                                })
                            } else {
                                localStorage.setItem("user",user_name)
                                window.location.href = "./ucenter.html?user_name="+user_name
                            }
                        }
                    });
                }

            }

        }); 
    </script>
</body>

</html>